import React from 'react'
import Avatars from '../../component/avatars'
import "./cash_income.scss"
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import Chart from '../../component/chart'
import { Table } from 'antd';
import { useSelector } from 'react-redux'
import { UserIcon } from '../../utils/icons';

export default function Cash_income() {
  const languages = useSelector((state) => state.publicReducer.language)
  const username = useSelector((state) => state.userReducer.user.username)
  const data = [
    {
      key: '1',
      날짜: '2022.11.29',
      보유현금: '3,000,000',
      수익금: '27,800',
      현금대비수익율: '0.93%',
      수수료: "2,780",
      실수익금: "25,020",
      쿠폰잔여금액: "83,320",
    },
    {
      key: '2',
      날짜: '2022.11.28',
      보유현금: '3,000,000',
      수익금: '27,800',
      현금대비수익율: '0.93%',
      수수료: "2,780",
      실수익금: "25,020",
      쿠폰잔여금액: "83,320",
    },
    {
      key: '3',
      날짜: '2022.11.27',
      보유현금: '3,000,000',
      수익금: '27,800',
      현금대비수익율: '0.93%',
      수수료: "2,780",
      실수익금: "25,020",
      쿠폰잔여금액: "83,320",
    },
    {
      key: '4',
      날짜: '2022.11.26',
      보유현금: '3,000,000',
      수익금: '27,800',
      현금대비수익율: '0.93%',
      수수료: "2,780",
      실수익금: "25,020",
      쿠폰잔여금액: "83,320",
    },
    {
      key: '5',
      날짜: '2022.11.25',
      보유현금: '3,000,000',
      수익금: '27,800',
      현금대비수익율: '0.93%',
      수수료: "2,780",
      실수익금: "25,020",
      쿠폰잔여금액: "83,320",
    },
  ]
  const columns = [
    {
      title: languages === "Korean" ? "날짜" : (languages === "Chinese" ? "日期" : "Date"),
      key: '날짜',
      dataIndex: '날짜',
      align: "center",
    },
    {
      title: languages === "Korean" ? "보유현금" : (languages === "Chinese" ? "现金" : "Cash"),
      dataIndex: '보유현금',
      key: '보유현금',
      align: "center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "수익금" : (languages === "Chinese" ? "收益" : "Profit"),
      dataIndex: '수익금',
      key: '수익금',
      align: "center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "현금대비 수익율" : (languages === "Chinese" ? "现金回报率" : "Rate of return"),
      dataIndex: '현금대비수익율',
      key: '현금대비수익율',
      align: "center",
    },
    {
      title: languages === "Korean" ? "수수료" : (languages === "Chinese" ? "交易费用" : "Fees"),
      dataIndex: '수수료',
      key: '수수료',
      align: "center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "실 수익금" : (languages === "Chinese" ? "实际收益" : "Revenue"),
      dataIndex: '실수익금',
      key: '실수익금',
      align: "center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "쿠폰 잔여 금액" : (languages === "Chinese" ? "可用优惠卷" : "Coupon balance"),
      dataIndex: '쿠폰잔여금액',
      key: '쿠폰잔여금액',
      align: "center",
      render: (row) => "₩" + row
    },
  ]

  return (
    <div className='cash_income'>
      <div className='nav'>
        <Avatars username={username} level="Lv.99" coupon={languages === "Korean" ? "쿠폰 잔액" : (languages === "Chinese" ? "可用优惠券" : "Coupon Balance")} balance="8,888,888" icon={<UserIcon />} />
      </div>
      <div className='main'>
        <p><i><LeftOutlined /></i> 2022{languages === "Korean" ? "년" : (languages === "Chinese" ? "年" : "Year")} 11{languages === "Korean" ? "월 " : (languages === "Chinese" ? "月" : "Month")}<i><RightOutlined /></i></p>
        <Table size='small' columns={columns} dataSource={data} pagination={false} scroll={true} />
        <div className='cash_chart'>
          <Chart sizes="large" header={languages === "Korean" ? "월별 총 수익" : (languages === "Chinese" ? "月总收益" : "Revenue per month")} main="8,888,888,888" />
          <Chart sizes="large" header={languages === "Korean" ? "월별 총 수익" : (languages === "Chinese" ? "月总收益" : "Revenue per month")} main="8,888,888,888" />
        </div>
      </div>
      <div className="footer">
        <hgroup>※ {languages === "Korean" ? "현금대비수익율은 수수료 차감전 수익율 입니다." : (languages === "Chinese" ? "现金回报率是扣除交易费用前的回报率。" : " 'Rate of return' is the rate of return before fees are deducted.")}</hgroup>
      </div>
    </div>
  )
}
